import router from '@/router'
export default function() {
  // 一、定义获取元素的方法
  const getDom = (className) => {
    return document.querySelector(className)
  }

// 获取元素
  const box = getDom('.drag') // 容器
  const bg = getDom('.bg') // 背景
  const text = getDom('.text') // 文字
  const btn = getDom('.btn') // 滑块按钮
  let success = false // 验证通过的标志
// offsetWidth包含边框+内边距+内容宽度，clientWidth不包含边框
  let distance = box.offsetWidth - btn.offsetWidth // 滑动成功的距离
// console.log(box.offsetWidth,box.clientWidth); // 300 300
// console.log(btn.offsetWidth,btn.clientWidth); // 42 40

// 二、滑块注册鼠标按下事件
  btn.onmousedown = function (e) {
    // 1. 鼠标按下之前必须清除掉后面设置的过渡属性，否则拖动会变慢
    btn.style.transition = ''
    bg.style.transition = ''
    //说明：clientX 事件属性会返回当事件被触发时(pageX则是整个文档大小的坐标)，鼠标指针向对于浏览器页面(即可视区大小，或客户区)的水平坐标。

    // 2. 当滑块位于初始位置时，得到鼠标按下时的水平位置
    const downX = e.clientX

    // 三 、给文档注册鼠标移动事件
    document.onmousemove = function (e) {
      console.log('执行了move');
      // 1. 鼠标移动后的水平位置
      const moveX = e.clientX
      // 2. 鼠标水平位置偏移量(水平移动距离)
      let offsetX = moveX - downX
      // 3. 判断鼠标水平移动距离 和 滑动成功的距离 之间的关系
      if (offsetX > distance) {
        offsetX = distance // 如果滑过了终点，就将它停留在终点位置
      } else if (offsetX < 0) {
        offsetX = 0 // 如果滑倒了起点的左侧，就将它重置为起点位置
      }

      // 4. 根据鼠标移动的水平距离动态设置滑块的偏移量和背景颜色宽度
      btn.style.left = bg.style.width = offsetX + 'px'

      // 如果鼠标水平移动距离 = 滑动成功宽度
      if (offsetX === distance) {
        // 1. 设置滑动成功后的样式
        text.innerHTML = '验证通过，2秒后自动跳转'
        text.style.color = '#fff'
        btn.innerHTML = "&radic;"
        btn.style.color = "green"
        bg.style.backgroundColor = "lightgreen"

        // 2. 设置滑动成功后的状态
        success = true
        // 成功后，清除掉鼠标按下事件和移动事件(⭐因为移动时并不会涉及鼠标松开事件)
        btn.onmousedown = null
        document.onmousemove = null

        //3.成功解锁后的回调函数
        setTimeout(function () {
          router.push('/welcome')
        }, 2000);
      }
    }

    // 四、给文档注册鼠标松开事件(注意事件写在按下btn内)
    document.onmouseup = function (e) {
      // 鼠标松开时，滑倒了终点，则验证通过
      if (success) {
        return
      } else {
        // 未到终点，则将滑块+背景色复位,
        btn.style.left = 0
        btn.style.transition = 'left 1s ease'
        bg.style.width = 0
        bg.style.transition = 'width 1s ease '
      }
      // 只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除文档对象的鼠标移动和松开事件
      console.log('清除');
      document.onmousemove = null
      document.onmouseup = null
    }

  }

}
